Par DocuGenerate Les applications de gestion des stocks créées avec Retool excellent dans l’organisation des données et la fourniture d’interfaces intuitives pour suivre les produits, commandes et expéditions. Cependant, de nombreuses entreprises ont besoin d’une documentation professionnelle pour leurs opérations d’expédition qui va au-delà de simples affichages de données. Créer des formulaires d’expédition PDF incluant des informations détaillées sur les produits, des adresses et une image de marque personnalisée peut considérablement améliorer les opérations logistiques et offrir aux clients une documentation professionnelle.
Dans ce tutoriel, nous allons améliorer le modèle Inventory Management App existant de Retool en intégrant les capacités de génération de documents de DocuGenerate. Plutôt que de créer un système de gestion des stocks depuis zéro, nous allons nous concentrer sur l’ajout d’une génération professionnelle de formulaires d’expédition PDF à une application déjà fonctionnelle. Cette approche illustre comment les applications Retool existantes peuvent être enrichies avec des fonctionnalités de génération de documents sans perturber les flux de travail établis.
L’intégration que nous allons construire crée une combinaison puissante où les utilisateurs peuvent gérer leurs données de stock via l’interface intuitive de Retool tout en générant des documents d’expédition professionnels à la demande. Cette solution est particulièrement précieuse pour les entreprises qui doivent fournir aux transporteurs, clients et équipes internes une documentation d’expédition standardisée incluant des informations détaillées sur les produits et l’image de marque de l’entreprise.
Avant d’ajouter des capacités de génération de documents, examinons la base sur laquelle nous travaillons. Le modèle Inventory Management App de Retool propose une solution complète pour suivre les niveaux de stock, gérer les expéditions et surveiller les données produits sur plusieurs emplacements.
L’application inclut plusieurs composants clés qui la rendent idéale pour notre amélioration des formulaires d’expédition :
Shipment Tracking : Un système complet pour gérer les expéditions de la création à la livraison, incluant les mises à jour de statut et des informations détaillées sur les expéditions.
Product Management : Des données produits complètes incluant descriptions, quantités et informations de prix, essentielles pour la documentation d’expédition.
Location Management : Prise en charge de plusieurs entrepôts et lieux d’expédition, fournissant les informations d’adresse nécessaires aux formulaires d’expédition.
Data Relationships : Des relations bien structurées entre expéditions, produits et emplacements qui facilitent une génération complète de documents.
La structure de données existante du modèle fournit toutes les informations généralement nécessaires pour des formulaires d’expédition professionnels, y compris les coordonnées de l’expéditeur et du destinataire, les descriptions de produits, les quantités et les informations de statut d’expédition.
Pour nous concentrer sur les aspects de génération de documents de ce tutoriel, nous allons apporter plusieurs modifications au modèle de base. Ces changements simplifient l’interface tout en préservant les fonctionnalités essentielles nécessaires à la génération des formulaires d’expédition.
Commencez par cloner le modèle Inventory Management App depuis la bibliothèque de modèles de Retool. Cela fournit la base complète avec des exemples de données, des flux de travail établis et des modèles d’interface utilisateur éprouvés.
Le modèle cloné inclut tous les composants, requêtes et exemples de données nécessaires pour démontrer le processus de génération des formulaires d’expédition. La structure existante fournit des scénarios d’expédition réalistes qui illustrent diverses possibilités de génération de documents.
Pour ce tutoriel, nous allons supprimer une partie de la complexité pour nous concentrer sur le flux de travail de génération de documents. La simplification principale consiste à mettre à jour la requête des expéditions pour supprimer le filtrage par date, ce qui facilite la visualisation de toutes les expéditions disponibles.
Nous supprimons les composants de filtrage par plage de dates et simplifions la requête getShipments. Ce changement n’affecte pas la fonctionnalité principale mais facilite la navigation parmi les expéditions pendant notre tutoriel. Dans un environnement de production, vous conserveriez généralement ces capacités de filtrage pour gérer de gros volumes de données d’expédition. La vue simplifiée offre un accès immédiat à toutes les expéditions, facilitant le test de la génération de documents avec différents types et configurations d’expéditions.
Ensuite, nous allons ajouter un bouton View Shipping Form à la page de détail de l’expédition. Ce bouton déclenchera le processus de génération de document et redirigera les utilisateurs vers une page de visualisation PDF.
L’emplacement du bouton s’intègre naturellement à l’interface existante de détail d’expédition, offrant aux utilisateurs un accès immédiat à la génération de formulaires d’expédition sans perturber les flux de travail établis. Le design du bouton correspond aux modèles de style existants de l’application et maintient la cohérence visuelle.
La dernière étape consiste à créer une nouvelle page ShippingFormPDF pour afficher les formulaires d’expédition générés. Cette page inclut un composant de visualisation PDF configuré pour afficher les documents générés par DocuGenerate et un bouton flottant Print permettant aux utilisateurs d’imprimer le formulaire d’expédition.
Pour générer des formulaires d’expédition dynamiques, nous devrons d’abord créer un modèle, conçu pour inclure tous les éléments essentiels généralement présents dans la documentation d’expédition commerciale. Le modèle de formulaire d’expédition inclut des sections avec des balises de fusion pour les informations de l’expéditeur, les détails du destinataire, le contenu de l’expédition et des notes supplémentaires.
Le modèle Shipping Form utilisé dans ce tutoriel inclut plusieurs fonctionnalités importantes :
Conditional Content : La section des notes n’apparaît que lorsque des notes d’expédition sont présentes, en utilisant la syntaxe conditionnelle
Dynamic Table : La section des articles de l’expédition s’agrandit automatiquement pour s’adapter à des nombres variables de produits en utilisant la syntaxe des tableaux
Consistent Formatting : Tous les éléments conservent une mise en forme professionnelle, quelle que soit la longueur ou la complexité du contenu
Avec notre interface prête, nous pouvons nous concentrer sur l’intégration des capacités de génération PDF de DocuGenerate dans le flux de travail d’expédition existant pour créer automatiquement les formulaires d’expédition.
Nous devons configurer la connexion entre Retool et l’API DocuGenerate. Cela implique de créer une ressource API REST qui gère l’authentification et la communication avec le service de génération de documents de DocuGenerate.
La configuration de l’API REST nécessite :
https://api.docugenerate.com (ou utilisez un de nos points de terminaison régionaux pour de meilleures performances)AuthorizationCette configuration établit la base de toutes les requêtes de génération de documents, gérant l’authentification automatiquement et fournissant une connexion réutilisable pour plusieurs types de documents.
Avec notre modèle créé, nous devons configurer la requête Retool qui envoie les données d’expédition à DocuGenerate pour traitement. Cette requête gère la transformation des données et la communication avec l’API.
La requête generateDocument utilise la ressource DocuGenerate et sa configuration inclut :
/v1/document/ pour créer de nouveaux documentstemplate_id : ID du modèle Shipping Form créé dans DocuGenerateoutput_format : défini sur .pdf pour générer des documents PDFname : spécifie le nom dynamique du document pour correspondre au nom affiché dans l’application (Shipment #{{ Shipments_HistoryCollection.selectedItem.id }})data : les données du formulaire d’expédition basées sur Shipments_HistoryCollection.selectedItem
[{
"shipment_number": "{{ Shipments_HistoryCollection.selectedItem.id }}",
"shipment_from": "{{ Shipments_HistoryCollection.selectedItem.fromStreet }}",
"shipment_to": "{{ Shipments_HistoryCollection.selectedItem.toStreet }}",
"shipment_status": "{{ Shipments_HistoryCollection.selectedItem.status }}",
"shipment_notes": "{{ Shipments_HistoryCollection.selectedItem.notes }}",
"shipment_items": {{ getShipmentItems.data }},
"shipment_date": "{{ Shipments_HistoryCollection.selectedItem.date }}"
}]
La requête transforme les données d’expédition de Retool dans le format attendu par le moteur de traitement de modèles de DocuGenerate. Cela inclut l’extraction des informations pertinentes de l’enregistrement d’expédition sélectionné et leur mise en forme appropriée pour les balises de fusion définies dans notre modèle.
La requête getShipmentItems fournit les articles de l’expédition dans un format tableau, mais celui-ci est incompatible avec le format liste attendu pour la valeur shipment_items utilisée dans la requête generateDocument.
Nous devons convertir ces données tabulaires en une structure de tableau pouvant alimenter la liste dynamique de produits dans notre modèle de formulaire d’expédition. Saisir le code JavaScript suivant dans l’étape Transform results convertira le format tableau en un tableau d’objets avec les attributs title et quantity :
const { title, quantity } = data;
return title.map((t, i) => ({
title: t,
quantity: quantity[i]
}));
Cette transformation garantit que les informations produits issues de la structure de base de données de Retool correspondent au format de tableau attendu par le moteur de traitement de modèles de DocuGenerate. Le tableau résultant peut accueillir n’importe quel nombre de produits tout en maintenant une mise en forme cohérente dans le document généré.
L’implémentation finale relie tous les composants en une expérience utilisateur fluide, de la sélection de l’expédition à la génération et l’affichage du PDF. Cette intégration garantit que la génération de documents s’intègre naturellement au flux de travail de gestion des stocks existant plutôt que d’apparaître comme un processus séparé.
Le bouton View Shipping Form nécessite deux gestionnaires d’événements pour gérer le flux de travail complet. Le premier gestionnaire d’événements déclenche la requête generateDocument, qui envoie les données d’expédition à DocuGenerate et reçoit en retour l’URL du PDF généré.
Le second gestionnaire d’événements gère la navigation vers la page ShippingFormPDF après la réussite de la génération du document. Cela crée une expérience utilisateur fluide où cliquer sur le bouton génère immédiatement le document et l’affiche à l’utilisateur.
La dernière étape consiste à afficher le formulaire d’expédition généré dans la page dédiée ajoutée à l’application au début de ce tutoriel.
Pour charger le document généré dans le composant ShippingFormPDFViewer, nous devons spécifier la valeur suivante dans le champ File URL :
{{ generateDocument.data?.document_uri }}
Cette configuration affiche automatiquement le PDF renvoyé par l’API de DocuGenerate via la requête de génération de document, offrant aux utilisateurs un accès immédiat à leurs formulaires d’expédition générés.
Avec tous les composants configurés, le flux de travail complet offre une expérience de génération de documents professionnelle intégrée directement à l’interface de gestion des stocks. Les utilisateurs peuvent passer de la gestion des expéditions à la génération de PDF professionnels sans quitter l’application.
La solution finalisée, à laquelle vous pouvez accéder ici, démontre plusieurs avantages clés :
Intégrer les capacités de génération de documents de DocuGenerate dans l’application Inventory Management de Retool démontre comment les applications no-code existantes peuvent être enrichies avec une création de documents professionnelle sans perturber les flux de travail établis. Cette approche apporte une valeur significative aux entreprises qui doivent générer une documentation d’expédition cohérente et professionnelle tout en maintenant l’efficacité de leurs processus de gestion des stocks existants.
La combinaison des capacités de création d’interfaces intuitives de Retool avec le traitement de modèles robuste de DocuGenerate crée une solution qui concilie efficacité opérationnelle et exigences de documentation professionnelle. Les utilisateurs peuvent continuer à gérer leurs stocks et expéditions via des interfaces familières tout en accédant à des capacités de génération de documents de niveau entreprise grâce à de simples clics. La flexibilité des deux plateformes signifie que la solution peut évoluer avec les besoins changeants de l’entreprise, prenant en charge aussi bien de simples étiquettes d’expédition que des manifestes d’expédition complexes sur plusieurs pages.
L’approche pas à pas de ce tutoriel démontre que des fonctionnalités sophistiquées de génération de documents peuvent être ajoutées à des applications existantes sans nécessiter de ressources de développement importantes ni perturber les flux de travail opérationnels actuels. Cela rend l’automatisation documentaire professionnelle accessible aux entreprises de toutes tailles, des petites structures gérant des dizaines d’expéditions aux grandes entreprises traitant des milliers de documents d’expédition par jour.
Saisissez votre e-mail pour recevoir la dernière newsletter de DocuGenerate
Découvrez comment créer un workflow automatisé de génération de factures avec n8n et DocuGenerate qui surveille un dossier pour les fichiers Excel, extrait les données et génère des factures PDF professionnelles. Idéal pour un traitement local sans dépendre de multiples solutions cloud.
Découvrez comment créer automatiquement de nouveaux modèles lorsque des documents Google Docs sont ajoutés à un dossier, et mettre à jour les modèles lorsque les documents sont modifiés. Idéal pour les équipes qui préfèrent travailler dans Google Docs mais ont besoin de la puissance de DocuGenerate pour la génération de documents.
Découvrez comment créer un workflow complet dans Bubble qui génère des NDA personnalisés et les envoie en pièce jointe par e-mail aux clients. Ce tutoriel pas à pas vous montre comment créer un système professionnel d'intégration client avec le générateur de pages IA de Bubble.